<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/data.js"></script>

</head>
<body>
<div id="div1">
    <input type="number" v-model="num1">+
    <input type="number" v-model="num2">=
    <span>{{parseInt(this.num1) + parseInt(this.num2)}}</span>
    <p>{{num1}}{{num2}}</p>
    <p>总价为{{total}}</p>
</div>
<script src="js/vue.js"></script>
<script>
    /*在vue中 this对象指的就是vue本身*/
    const books = [{
        id: 1,
        name: '西游记',
        price: 18.8,
        num: 6
    }, {
        id: 2,
        name: '红楼梦',
        price: 20.8,
        num: 3
    }, {
        id: 3,
        name: '水浒传',
        price: 7.8,
        num: 16
    }, {
        id: 4,
        name: '三国演义',
        price: 28.8,
        num: 2
    }]
    new Vue({
        el: '#div1',
        data: {
            num1: 1,
            num2: 1,
            books
        },
        computed: {
            //computed 计算属性，对于复杂的业务数据进行计算
            //结果是一个对象，对象里面绑定的是一个函数，它没有参数，必有返回值
            total() {
                let sum = 0;
                for (const book of this.books) {
                    sum += book.price * book.num;
                }
                return sum

            }
        }
    })
</script>
</body>
</html>